<template>
  <div class="flow-table" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
    <div class="flow-title">
      <div class="">板块名称</div>
      <div class="">当日涨跌幅</div>
    </div>
    <transition-group name="fade" tag="div">
      <div class="flow-row" v-for="(flow) in sortedFlows" :key="flow.name">
        <div class="flow-item">
          <div class="flow-name">{{ flow.name }}</div>
          <div class="flow-price" :class="{ 'increase': flow.change > 0, 'decrease': flow.change < 0 }">{{ flow.change
            }}%</div>
          <div v-if="flow.change > 0" class="flow-arrow">
            <img src="../assets/arrow-up.svg">
          </div>
          <div v-if="flow.change < 0" class="flow-arrow">
            <img src="../assets/arrow-down.svg">
          </div>
        </div>

      </div>
    </transition-group>

  </div>

</template>

<script>
import axios from 'axios';
// 模拟生成股票数据

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 6,
      flows: [],
      fetchIntervalId: null,
      isMouseInside: false,
      lastMouseMoveTime: null,
      mouseInactiveTimeout: 5000, // 鼠标不活动超过10秒后开始自动滚动
      fetchInterval: 8000, // 10秒钟刷新一次数据
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.flows.length / this.pageSize);
    },
    currentPageflow() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.flows.slice(startIndex, endIndex);
    },
    sortedFlows() {
      const sorted = this.flows.slice().sort((a, b) => b.change - a.change);
      const topThree = sorted.slice(0, 3);
      const bottomThree = sorted.slice(-3).reverse();
      return [...topThree, ...bottomThree];
    }
  },
  methods: {

    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },

    autoFetchStocks() {
      this.fetchIntervalId = setInterval(() => {
        if (!this.isMouseInside || (new Date().getTime() - this.lastMouseMoveTime > this.mouseInactiveTimeout)) {
          this.fetchStocks();
        }
      }, this.fetchInterval);
    },
    stopAutoFetchStocks() {
      clearInterval(this.fetchIntervalId);
      this.fetchIntervalId = null;
    },
    handleMouseMove() {
      this.isMouseInside = true;
      this.updateLastMouseMoveTime();
    },
    handleMouseLeave() {
      this.isMouseInside = false;
      this.updateLastMouseMoveTime();
    },
    updateLastMouseMoveTime() {
      this.lastMouseMoveTime = new Date().getTime();
    },

    fetchStocks() {
      axios.get('/rFRange/findAll').then((response) => {
        console.log(response.data);
        this.flows = response.data.data;
      }).catch((error) => {
        console.error('Error', error);
      });
    },
  },
  mounted() {
    this.fetchStocks();
    this.autoFetchStocks();
  },

};
</script>

<style scoped>
.flow-table {
  color: #f0f0f0;
  font-size: 14px;
  width: 96%;
  height: 340px;
  overflow: hidden;
  margin: 0 auto;
}

.flow-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  height: 100%;
}

.flow-title {
  font-size: 16px;

  background-color: #06245e;
  width: 100%;
  display: flex;
  padding: 9px;
  justify-content: space-between;
  border-bottom: solid 4px #05174d;
  border-top: solid 4px #05174d;
}

.flow-item {
  background-color: #06245e;
  width: 100%;
  display: flex;
  padding: 9px;
  justify-content: space-between;
  /* border-bottom: solid 5px #05174d; */
  border-top: solid 4px #05174d;
}

.flow-name {
  color: #f8f6f6f3;
  margin-left: 10px;
}

.flow-price {
  color: #add8e6;
  margin: auto auto;
  /*关键 */
  margin-right: 10px;
}

.flow-arrow {
  margin-top: 1px;

}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>